<template>
	<!--筛选-->
	<view>
		<view class="my-head">
			<view class="head-left fl-t">
				<u-icon @click="screenClose" name="close"></u-icon>
			</view>
			<view class="title  fl-c">
				筛选
			</view>
			<view class="head-right ">
			</view>
		</view>
		<view class="occupy"></view>
		<view class="center">
			<view v-for="(list,index) in lists" :key="index">
				<view class="screen-title">{{list.title}}</view>
				<view class="fl-w  tabs">
					<view class="li" v-for="(item,i) in list.data" :key="i" :class="{'activation':list.activation==i}"
						@click="clickItem(list,i,item)">{{item.FullName}}</view>
				</view>
			</view>
			<view style="width: 100%;height: 200rpx;"></view>
			<view class="fl-lr-c  bottom-but">
				<view class="but1  fl-c" @click="Reset()">重置</view>
				<view class="but2  fl-c" @click="preservation">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				load: true, //是否加载完成
				lists: [{
					activation: 0,
					val: "不限",
					title: '薪资待遇',
					data: ["不限", "3k以下", "3k~5k", "5k~10k", "10k~20k", "20k~30k", "30k以上"]
				}, {
					activation: 0,
					val: "不限",
					title: "学历要求",
					data: ["不限", "初中及以下", "中专/中技", "高中", "大专", "本科", "硕士", "博士"]
				}, {
					activation: 0,
					val: "不限",
					title: "经验要求",
					data: ["不限", "在校生", "应届生", "1年以内", "1~3年", "3~5年", "5~10年", "10年以上"]
				}, {
					activation: 0,
					val: "不限",
					title: "行业",
					data: ["不限"]
				}, {
					activation: 0,
					val: "不限",
					title: "人员规模",
					data: ["不限", "0~20人", "20~99人", "100~499人", "500~999人", "1000~9999人", "10000人以上"]
				}, {
					activation: 0,
					title: "融资阶段",
					val: "不限",
					data: ["不限", "未融资", "天使轮", "A轮", "B轮", "C轮", "D轮及其以上", "已上市", "不需要融资"]
				}],


			}
		},
		components: {},
		computed: {},
		onLoad(o) {
			// console.log(JSON.parse(o.data));
			// if (!o.data=='[]' && o.data.length>0) {
			// 	console.log(JSON.parse(o.data))
			// 	// debugger
			// 	// this.lists.data=JSON.parse(decodeURIComponent(o.data))
			// 	console.log(this.lists);
			// } else {
			// 	this.load = false;
			// 	this.getIndustry()
			// }
			// if (o.data) {
			// 	if (JSON.parse(o.data).length > 0) {
			// 		console.log(JSON.parse(o.data));
			// 		this.lists = JSON.parse(o.data)
			// 	} else {
			// 		this.load = false;
			// 	}
			// }
			console.log(this.$store.state.jobAdd);
			this.getIndustry()
		},
		created() {

		},
		onShow() {

		},
		// 初次渲染
		onReady() {

		},
		// 挂载完成调用
		mounted() {

		},
		watch: {
			"$store.state.jobAdd": {
				handler(val) {
					if (val) {
						this.lists = JSON.parse(JSON.stringify(val));
						// console.log(this.lists);
					}
				},
				immediate: true,
			},
		},
		// 计算方法
		methods: {
			getIndustry() {
				// 薪资待遇
				let sa = {
					FullName: "不限",
					EnCode: "-1",
					children: []
				}
				this.$http.dic.DataSelector(385800457572485).then(res => {
					if (res.Success) {
						this.lists[0].data = res.Result
						this.lists[0].data.unshift(sa)
					}
				});
				// 学历要求
				this.$http.dic.DataSelector(385800548573317).then(res => {
					if (res.Success) {
						this.lists[1].data = res.Result
						this.lists[1].data.unshift(sa)
						// console.log(this.lists[1]);
					}
				});
				// 工作经验
				this.$http.dic.DataSelector(385800643113093).then(res => {
					if (res.Success) {
						this.lists[2].data = res.Result
						this.lists[2].data.unshift(sa)
					}
				});
				// 行业
				this.$http.dic.coreSelector(366287052411013).then(res => {
					if (res.Success) {
						this.lists[3].data = res.Result
						this.lists[3].data.unshift(sa)
					}
				});
				// 人员规模
				this.$http.dic.coreSelector(10).then(res => {
					if (res.Success) {
						this.lists[4].data = res.Result
						this.lists[4].data.unshift(sa)
					}
				});
				// 融资阶段
				this.$http.dic.coreSelector(12).then(res => {
					if (res.Success) {
						this.lists[5].data = res.Result
						this.lists[5].data.unshift(sa)
					}
				});

				// let arr=[]
				// arr.push(sa)
				// let newData=[]
				// this.lists.forEach(item=>{
				// 	console.log(item.data);

				// })

				// console.log(newData);
				// this.$http.dic.DataSelector().then(res => {

				// 	res.data.data.forEach(item => {
				// 		this.lists[3].data.push(item.name)
				// 	})
				// 	this.load = true;
				// })
			},
			screenClose() {
				uni.navigateBack();
			},
			clickItem(item, index, val) {
				item.activation = index;
				item.val = val;
			},
			Reset() {
				this.lists.forEach(item => {
					// console.log(item);
					item.activation = 0
					item.val = "不限"
				})
				// uni.$emit("getScreenData", this.lists)
			},
			preservation() {
				// console.log('111', this.lists);
				// uni.$emit("getScreenData", this.lists)
				this.$store.commit("setjobAdd", this.lists);
				// uni.$emit('jobrefresh', true)
				uni.navigateBack();
			}


		},
	}
</script>

<style lang="scss" scoped>
	.occupy {
		height: calc(88rpx + var(--status-bar-height));
	}

	.my-head {
		position: fixed;
		top: 0;
		width: 100%;
		padding: var(--status-bar-height) 50rpx 0 30rpx;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		z-index: 999;
		background-color: #fff;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.head-left,
		.head-right {
			width: 100rpx;
		}

	}

	.center {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.screen-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #313131;
			margin: 30rpx 0;
		}

		.tabs {

			view {
				width: 216rpx;
				height: 64rpx;
				background: #F7F7F7;
				border-radius: 4rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				line-height: 64rpx;
			}

			.li:nth-child(3n+2) {
				margin: 0 20rpx 20rpx;
			}

			.activation {
				color: #1684FC;
				background: #F1F8FF;
				border: 1rpx solid #1684FC;
				box-sizing: border-box;
			}

		}

		.bottom-but {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.but1 {
				width: 216rpx;
				height: 88rpx;
				background: #F7F7F7;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.but2 {
				width: 450rpx;
				height: 88rpx;
				background: #1684FC;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>